<script lang="ts">
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import UIcon from "@/uni_modules/u-icon/components/u-icon/u-icon.vue";
    import UText from "@/uni_modules/u-text/components/u-text/u-text.vue";

    export default {
        name: "u-radio",
        // 组件
        components: {UIcon, UText},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["click"],
        // 数据
        data()
        {
            return {
                grid: <GridInterface[]>[]
            };
        },
        // 监听器
        watch: {
            // 监听数据
            data: {
                handler(data: GridInterface[]): void
                {
                    // 当前的宫格数据
                    const grid: GridInterface[] = data.filter((item: GridInterface, index: number): boolean =>
                    {
                        // 是否显示
                        if (item.show != null)
                        {
                            if (isBoolean(item.show) && !item.show || isFunction(item.show) && item.show.apply(item, [item, data, index]) === false)
                            {
                                return false;
                            }
                        }

                        return true;
                    });

                    // 判断是否需要部位
                    if (this.autoCompletion)
                    {
                        // 当前显示的列数
                        const span = Number(this.span);

                        // 计算补全的个数
                        let completion = 0;

                        if (grid.length < span)
                        {
                            completion = span - grid.length;
                        }
                        else if (grid.length > span && grid.length % span !== 0)
                        {
                            completion = span - grid.length % span;
                        }

                        for (let i = 0; i < completion; i++)
                        {
                            grid.push({});
                        }
                    }

                    // 设置数据
                    this.grid = grid;
                },
                immediate: true,
                deep: true
            }
        },
        // 页面挂载
        mounted()
        {
        },
        // 计算函数
        computed: {},
        // 方法
        methods: {
            // 点击事件
            clickHandler(argumentsList: Record<string, any>): void
            {
                const {data, index, event} = argumentsList || {};

                // 点击事件
                this.$emit("click", {data, grid: this.grid, index});

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <!-- 宫格组件 -->
    <view
        :class="[customClass]"
        :style="[customStyle]"
        class="u-grid"
    >
        <!-- 宫格内盒 -->
        <view
            :class="[square ? 'square-block' : 'auto-block']"
            :style="[
                {'--custom-grid-span': span}
            ]"
            class="u-grid-wrapper"
        >
            <!-- 遍历 -->
            <view
                v-for="(item, index) in grid"
                :key="index"
                :data-id="index"
                class="grid"
                @tap="(event: Record<string, any>) => {clickHandler({event, data: item, index})}"
            >
                <!-- 内盒 -->
                <view class="grid-inner">
                    <!-- 图标 -->
                    <view
                        v-if="item.iconConfig?.icon"
                        class="icon"
                    >
                        <u-icon v-bind="item.iconConfig" />
                    </view>
                    <!-- //图标 -->

                    <!-- 文本 -->
                    <view
                        v-if="item.textConfig?.text"
                        class="text"
                    >
                        <u-text v-bind="item.textConfig" />
                    </view>
                    <!-- //文本 -->
                </view>
                <!-- //内盒 -->
            </view>
            <!-- //遍历 -->
        </view>
        <!-- //宫格内盒 -->
    </view>
    <!-- //宫格组件 -->
</template>

<style lang="scss" scoped>
    $u-grid-border-color: #c8c9cc !default;

    .u-grid
    {
        // 宫格内盒
        .u-grid-wrapper
        {
            display: grid;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-color: $u-grid-border-color;
            grid-template-columns: repeat(var(--custom-grid-span), minmax(0, 1fr));

            // 宫格
            .grid
            {
                // 内盒
                .grid-inner
                {
                    border-width: 1px 0 0 1px;
                    border-style: solid;
                    border-color: $u-grid-border-color;
                }
            }

            // 显示为正方形
            &.square-block
            {
                // 宫格
                .grid
                {
                    position: relative;
                    overflow: hidden;
                    padding-top: 100%;

                    // 内盒
                    .grid-inner
                    {
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                    }
                }
            }
        }
    }
</style>